<template>
	<view class="unio2o-page-has-bg">
	<view class="unio2o-jb-bg"></view>
	
	<view class="unio2o-coupon-detail unio2o-main">
		<view class="coupon-box bg-w box-shadow bdr16 pb40">
			<image class="logo" :src="''"></image>
			<image class="coupon-type" :src="''"></image>
			<view class="coupon-main">
				<view class="ft14 text-center text-main">
					我要有异业联盟
				</view>
				<view class="mt30 text-center text-main ft24 ftw600">10元美食通用优惠券</view>
				
				<view class="mt30 flex center alcenter">
					<image class="wh20" :src="'icon_diamond'"></image>
					<text class="ft18 text-theme ftw600 ml10">1000 + ¥15</text>
					<text class="ft14 text-notice text-line ml10">¥20</text>
				</view>
				
				<view class="flex center mt30">
					<navigator url="/pages/exchange/order/coupon" style="width: 100%;"><button class="btn-main ftw600 text-w">立即兑换</button></navigator>
				</view>
				<view class="mt30 flex space">
					<view class="ft14 text-main">已领：<text class="text-default ftw600">200</text></view>
					<view class="ft14 text-main">还剩：<text class="text-default ftw600">159</text></view>
				</view>
			</view>
			<view class="coupon-line mt30"><image :src="''"></image></view>
			
			<view class="plr40 mt30">
				
				<view class="flex wrap">
					<view @click="showRole = true" class="coupon-tag-type mr20 mb30">购买套餐抵扣 <text class="iconfont iconbtn_question ml10"></text></view>
					<view @click="showRole = true" class="coupon-tag-type mr20 mb30">商户线下核销使用 <text class="iconfont iconbtn_question ml10"></text></view>
					<view @click="showRole = true" class="coupon-tag-type mr20 mb30">优惠买单使用 <text class="iconfont iconbtn_question ml10"></text></view>
				</view>
				<unio2o-coupon-alert @closed="showRole = false" :show="showRole"></unio2o-coupon-alert>
				<view class="flex mt30">
					<view class="coupon-l ft16 ftw600 text-main">
						使用期限
					</view>
					<view class="coupon-r pl10 ft16 text-info pl20">
						2019.08.01 ~ 2020.08.01
					</view>
				</view>
				<view class="flex mt30">
					<view class="coupon-l ft16 ftw600 text-main">
						退订规则
					</view>
					<view class="coupon-r pl10 ft16 text-info pl20">
						付费券过期自动退款到余额
					</view>
				</view>
				<view class="flex mt30">
					<view class="coupon-l ft16 ftw600 text-main">
						券类型
					</view>
					<view class="coupon-r pl10 ft16 text-info pl20">
						异业联盟平台券
					</view>
				</view>
				<view class="flex mt30">
					<view class="coupon-l ft16 ftw600 text-main">
						使用条件
					</view>
					<view class="coupon-r pl10 ft16 text-info pl20">
						满100可用
					</view>
				</view>
				<view class="flex mt30">
					<view class="coupon-l ft16 ftw600 text-main">
						使用时间
					</view>
					<view class="coupon-r pl10 ft16 text-info pl20">
						09:00-20:00，周一至周日可用
					</view>
				</view>
				<view class="flex mt30">
					<view class="coupon-l ft16 ftw600 text-main">
						使用说明
					</view>
					<text class="coupon-r pl10 ft16 text-info pl20">
						美食类消费可使用该优惠券，勾选即可抵扣相应消费金额。
						
						该优惠券只可在活动期间使用，不接受现金兑换；不可叠加使用
						
						不限本人使用，可赠送好友。
					</text>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import unio2oCouponAlert from '@/components/module/coupon/roleAlert.vue';
	export default{
		components:{
			unio2oCouponAlert
		},
		data(){
			return {
				showRole:false
			}
		}
	}
</script>

<style>
	.unio2o-coupon-detail{
		padding:80rpx 30rpx  80rpx 30rpx  ;
	}
	.unio2o-coupon-detail .coupon-box{
		position: relative;
		min-height: 1000rpx;
	}
	.unio2o-coupon-detail .coupon-box .logo{
		width: 160rpx;
		height: 160rpx;
		border-radius: 80rpx;
		box-shadow:0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.06);
		border:4rpx solid #FFFFFF;
		position: absolute;
		left: calc(50% - 80rpx);
		top:-40rpx;
	}
	.unio2o-coupon-detail .coupon-type{
		position: absolute;
		left: 0;
		top: 0;
		width: 100rpx;
		height: 100rpx;
	}
	.unio2o-coupon-detail .coupon-main{
		padding-top: 142rpx;
		padding-left: 60rpx;
		padding-right: 60rpx;
	}
	.unio2o-coupon-detail .coupon-line{
		height: 34rpx;
		width: 100%;
	}
	.unio2o-coupon-detail .coupon-line image{
		height: 34rpx;
		width: 100%;
	}
	.unio2o-coupon-detail .coupon-tag-type{
		font-size: 28rpx;
		padding: 8rpx 20rpx;
		color:#FF6D00;
		border-radius: 28rpx;
		border:2rpx solid #FF6D00;
	}
	.unio2o-coupon-detail .coupon-l{
		width: 140rpx;
	}
	.unio2o-coupon-detail .coupon-r{
		width: calc(100% - 140rpx);
	}
</style>